<template>
    <div>
        <el-button type="primary" @click="add">新建公告</el-button>
        <el-collapse accordion>
            <div><strong>已发布公告</strong></div>
            <el-collapse-item :title="item.title" name="1" class="released" v-for="(item, index) in notices" :key="index">
                <div>
                    {{item.content}}
                </div>
                <div class="released-message">
                    <p>作者：{{item.author}}</p>
                    <p>时间：{{item.date}}</p>
                </div>
            </el-collapse-item>
        </el-collapse>
        <shade v-show="isAdd">
            <div class="box">
                <h2>请输入最新公告:</h2>
                <i class="el-icon-error close" @click="close"></i>
                <el-form ref="form"  label-width="100px" >
                    <el-form-item label="公告主题：">
                        <el-input v-model="form.title"></el-input>
                        <i class="el-icon-error" v-show="errCode == 1">请输入主题</i>
                    </el-form-item>
                    <el-form-item label="公告作者：" >
                        <el-input v-model="form.author"></el-input>
                        <i class="el-icon-error" v-show="errCode == 2">请输入作者</i>
                    </el-form-item>
                    <el-form-item label="公告内容：" >
                        <el-input v-model="form.content" type="textarea"></el-input>
                        <i class="el-icon-error" v-show="errCode == 3">请输入内容</i>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </shade>
    </div>
</template>

<script>
    import Shade from "../../../components/common/shade/Shade";
    import {sendwithpost} from "../../../network/profile";
    export default {
        name: "Notice",
        data() {
            return {
                form: {
                    title: '',
                    author: '',
                    content: ''
                },
                errCode: null,
                isAdd: false,
                notices: []
            }
        },
        components: {
            Shade
        },
        created() {
          this.getData()
        },
        methods: {
            submitForm() {
                if (!this.form.title.length > 0) {
                     this.errCode = 1
                }else if (!this.form.author.length > 0) {
                    this.errCode = 2
                }else if (!this.form.content.length > 0) {
                    this.errCode = 3
                }else {
                    sendwithpost({
                        url: '/addNotice',
                        data: this.form
                    }).then(res=> {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: res.data.type
                        })
                        if (res.data.res_code == 2) {
                            this.close()
                            this.getData()
                        }
                    })
                }
            },
            close() {
                this.form = {}
                this.isAdd = false
                this.errCode = null
            },
            add() {
                this.isAdd = true
            },
            getData() {
                sendwithpost({
                    url: '/getNotice'
                }).then(res=> {
                    if (res.data.res_code == 2) {
                        this.notices = res.data.data
                    }else {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: res.data.type
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .box {
        width: 700px;
        min-height: 400px;
        padding: 40px;
        background-color: #fff;
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    i {
        color: red;
    }
    .close {
        color: #999999;
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
    }
    .released {
        display: flex;
        flex-flow: column;
    }
    .released-message {
        text-align: right;
        padding-right: 50px;
    }
</style>